import React, { useState } from "react";
import { Card, Layout } from "antd";
import 项目管理 from "./manage_project"; // 引入子页面组件
import 主机管理 from "./manage_host";
import 应用管理 from "./manage_app";
import 连接器管理 from "./manage_controller";
import 探针管理 from "./manage_probe";

const { Content, Sider } = Layout;

const App: React.FC = () => {
    const [activePage, setActivePage] = useState("项目管理");

    // 页面对应的组件映射
    const pages: Record<string, React.FC> = {
        项目管理,
        连接器管理,
        探针管理,
        主机管理,
        应用管理
    };

    return (
        <Layout style={{ height: "80vh" }}>
            {/* 左侧卡片 */}
            <Sider
                width={200}
                style={{
                    padding: "20px",
                    borderRight: "1px solid #d9d9d9",
                    background: "transparent",
                }}
            >
                {Object.keys(pages).map((key) => (
                    <Card
                        key={key}
                        hoverable
                        style={{
                            marginBottom: "16px",
                            border: activePage === key ? "2px solid #1890ff" : "1px solid #d9d9d9",
                            boxShadow: activePage === key ? "0 0 5px rgba(24, 144, 255, 0.5)" : "none",
                        }}
                        onClick={() => setActivePage(key)}
                    >
                        {key}
                    </Card>
                ))}
            </Sider>

            {/* 右侧内容区 */}
            <Content style={{ padding: "20px", background: "transparent" }}>
                <Card
                    style={{
                        height: "100%",
                        background: "transparent",
                        border: "1px solid #d9d9d9",
                    }}
                >
                    {/* 动态渲染当前激活的页面 */}
                    {React.createElement(pages[activePage])}
                </Card>
            </Content>
        </Layout>
    );
};

export default App;
